<script>
/***
 bilibili导航栏
 props: 接收包含 chinaName 以及 id 属性的数组类
 emits: model 绑定一个属性，表示选中的id
 */

export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: "Nav",

  data(){
    return {
      // navInfoStore: useNavInfoStore(),
    }
  },
  props:{
    menuValue:{
      Array,
      required: true,
    },
    modelValue:{},
  },
  emits:['update:modelValue'],

  computed:{
    // 导航栏数组
    navMenuValue(){
      if(this.menuValue === undefined || this.menuValue === [] || this.menuValue === null){
        return []
      }
      return this.menuValue.map(item => ({
        label: item.chinaName,
        value: item.id,
      }))
    },

    // 导航栏选中项,父组件v-model,自定义组件使用v-model
    selectValue:{
      get(){
        return this.modelValue
      },
      set(value){
        this.$emit('update:modelValue', value)
      }
    }
  },

}
</script>

<template>
    <el-scrollbar>
      <div class="nav-style">
        <el-segmented v-model="selectValue" :options="navMenuValue">
        </el-segmented>
      </div>
    </el-scrollbar>
</template>


<style scoped>
:deep(.el-scrollbar__bar.is-horizontal){
  display: none;
}
/* 解除鼠标长按时的灰色背景 */
:deep(.el-segmented__item:not(.is-disabled):not(.is-selected):active){
  background: none;
}
:deep(.el-segmented__item:not(.is-disabled):not(.is-selected):hover){
  background: none;
}
/* 设置每个选项的距离，去除谷歌游览器按钮按下带有的蓝色背景 */
:deep(.el-segmented__item){
  padding: 0 4.26667vmin;
  -webkit-tap-highlight-color: transparent; /* 去掉点击高亮 */
}
/* 设置选中项的下划线 */
:deep(.el-segmented__item-selected){
  border-bottom: solid #fb7299 0.53333vmin;
  height: calc(10.66667vmin - 0.53333vmin);
  border-radius: 0.53333vmin;
}

.nav-style .el-segmented{
  --el-segmented-item-selected-color: #fb7299;
  --el-segmented-item-selected-bg-color: #ffffff;
  --el-segmented-bg-color:none;
  --el-segmented-padding: none;
  font-size: 3.73333vmin;
  height: 10.66667vmin;
  line-height: 10.66667vmin;
  color: #505050;
}

.nav-style::before{
  position: absolute;
  content: '';
  height: 1px;
  background: #e7e7e7;
  transform: scaleY(.5);
  width: 100%;
  left: 0;
  bottom:0;
}

</style>